<template>
	<view class="page-wrap">
		<view class="table-tab">
			<view class="table-tab-item" @click="switchTab(i)" :class="{'active': tabIndex === i}"
				v-for="(item, i) in tableTab" :key="i">
				{{item.table}}
			</view>
		</view>
		<view class="profit-loss">
			<view class="details-but">
				详情
				<uni-icons type="right" size="16" color="#ffffff"></uni-icons>
			</view>
			<view class="profit-loss-title">
				近1周盈亏
			</view>
			<view class="profit-loss-num">
				00
			</view>
			<view class="profit-loss-proportion">
				收益率 0.00%
			</view>
		</view>
		<view class="transaction-statistics">
			<view class="transaction-statistics-title">
				<view class="transaction-statistics-left">
					<text class="main-title">交易统计</text>
					<text class="item-title">(近1周)</text>
				</view>
				<view class="transaction-statistics-right">
					<text class="detail-text">成交明细</text>
					<uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
				</view>
			</view>
			<view class="decoration">
				<view class="gradient"></view>
			</view>
			<view class="probability-data">
				<view class="probability-data-item">
					<view class="probability-num">
						--
					</view>
					<view class="probability-name">
						胜率
					</view>
					<view class="probability-proportion">
						0.00
					</view>
					<view class="probability-describe">
						最大回撤
					</view>
				</view>
				<view class="probability-data-item">
					<view class="probability-num">
						--
					</view>
					<view class="probability-name">
						盈亏比
					</view>
					<view class="probability-proportion">
						0.00%
					</view>
					<view class="probability-describe">
						最大使用率
					</view>
				</view>
			</view>
			<view class="divider"></view>
			<view class="trend">
				<view class="trend-title">
					<text class="main-title" @click="openTrend">收益走势</text>
					<text class="item-title">(近1周)</text>
				</view>
				<view class="trend-tab-box">
					<view class="trend-tab-item" :class="{'active': trendTabIndex === i}" v-for="(item, i) in trendTab"
						:key="i" @click="switchTrendTab(i)">
						{{item.table}}
					</view>
				</view>
			</view>
			<view class="revenue-type">
				<view class="revenue-type-item">
					<view class="option-icon" :class="{'active': revenueType === 1}" @click="switchRevenueType(1)">
						<uni-icons v-if="revenueType === 1" type="checkmarkempty" size="16" color="#CCCCCC"></uni-icons>
					</view>
					<view class="option-text" v-if="trendTabIndex === 0">
						当日收益率
					</view>
					<view class="option-text" v-else-if="trendTabIndex === 1">
						权益
					</view>
					<view class="option-text" v-else-if="trendTabIndex === 2">
						当日盈亏
					</view>
				</view>
				<view class="revenue-type-item">
					<view class="option-icon" :class="{'active': revenueType === 2}" @click="switchRevenueType(2)">
						<uni-icons v-if="revenueType === 2" type="checkmarkempty" size="16" color="#CCCCCC"></uni-icons>
					</view>
					<view class="option-text" v-if="trendTabIndex === 0">
						累计收益率
					</view>
					<view class="option-text" v-else-if="trendTabIndex === 1">
						资金使用率
					</view>
					<view class="option-text" v-else-if="trendTabIndex === 2">
						累计盈亏
					</view>
				</view>
			</view>
			<view class="statistics-title">
				<view class="statistics-title-time">
					2023/11/03
				</view>
				<view class="statistics-income">
					累计收益率: 0.00%
				</view>
			</view>
			<view class="qiun-charts">
				<l-echart ref="barChart" @finished="barInit"></l-echart>
			</view>
		</view>
		<view class="calendar-statistics transaction-statistics">
			<view class="transaction-statistics-title">
				<view class="transaction-statistics-left">
					<text class="main-title">每月盈亏</text>
				</view>
				<view class="transaction-statistics-right" @click="switchCalendarIncome">
					<view class="switch-icon">
						<image class="img-full" src="@/static/transaction/switch-icon.png"></image>
					</view>
					<text class="detail-text" v-if="calendarincome">切换为收益率</text>
					<text class="detail-text" v-else>切换为金额</text>
				</view>
			</view>
			<view class="decoration">
				<view class="gradient"></view>
			</view>
			<view class="monthly-profit">
				<view class="calendar-title">
					<view class="calendar-title-left">
						<view class="switch-type-item" :class="{'active': calendarType ===1}" @click="switchCalendar(1)">
							年
						</view>
						<view class="switch-type-item" :class="{'active': calendarType ===2}" @click="switchCalendar(2)">
							月
						</view>
					</view>
					<view class="calendar-title-right">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}<uni-icons type="down" size="20" color="#4482EE"></uni-icons></view>
						</picker>
					</view>
				</view>
				<Calendar class="calendar-table" :currentTime='currentTime' :mark='mark' @dayChange='dayChange' @monthChange='monthChange'
					:rangeMode='rangeMode' :range='range' @rangeChange='rangeChange' :dateStart='startDate'
					:dateEnd='endDate' :canDrag='true' :showLunar="false">
				</Calendar>
				<view class="accumulate-income">
					11月累计收益: 0
				</view>
			</view>
		</view>
		<view class="note-prompt">
			以上数据仅供参考
		</view>
		<view class="page-buts">
			<view class="but">
				意见反馈
			</view>
			<view class="but">
				重算报告
			</view>
		</view>
		<uni-popup ref="trendPopup" type="center">
			<view class="trendPopup-center">
				<view class="trendPopup-title">
					收益走势说明
				</view>
				<view class="trendPopup-text">
					<view class="">
						当日收益率=(当日期末权益-当日期初权益-当日出入金)/当日期初权益
					</view>
					<view class="">
						累计收益率=(期未权益-区间期初权益-区间出入金总和) /区间期初权益
					</view>
					<view class="">
						当日盈亏=当日期未权益-当日期初权益-当日出入金<br />
						累计盈亏=累计每日盈亏的总和
					</view>
				</view>
				<view class="but" @click="headTrend">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as echarts from '@/utils/echarts.min.js';
	import Calendar from '@/components/Li-Calendar/Li-Calendar.vue';
	export default {
		components: {
			Calendar
		},
		data() {
			
			const currentDate = this.getDate({
				format: true
			})
			return {
				tabIndex: 0,
				tableTab: [{
					table: '近1周',
				}, {
					table: '近1月',
				}, {
					table: '近6月',
				}, {
					table: '全部',
				}, {
					table: '指定',
				}],
				trendTabIndex: 0,
				trendTab: [{
					table: '收益率',
				}, {
					table: '权益',
				}, {
					table: '盈亏',
				}],
				revenueType: 1,
				barOption: {},

				mark: [{
						time: '2024-1-23',
						text: '10%',
						markPoint: true,
						markTextColor: 'blue',
						pointText: '奖',
						pointTextColor: 'red'
					},
					{
						time: '2024-1-15',
						text: '上山打老虎上山打老虎',
						markPoint: true,
						pointText: '2',
					}
				],
				range: {
					rangeStart: undefined, //设置标记范围开始，yyyyMM-dd
					rangeEnd: undefined //设置标记范围结束，yyyyMM-dd
				},
				dateIndex: 1,
				rangeMode: false,
				currentTime: currentDate,
				title: 'Hello',
				dateStart: '2019-6-15',
				dateEnd: '2020-6-15',
				
				date: currentDate,
				calendarType: 1,
				calendarincome: true,
				
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 切换收益范围
			switchTab(i) {
				this.tabIndex = i
			},
			// 切换收益统计类型
			switchTrendTab(i) {
				this.trendTabIndex = i
			},
			// 切换收益类型
			switchRevenueType(i) {
				this.revenueType = i
			},
			// 初始化图表
			barInit() {
				this.barOption = {
					color: ["#356FE5"],
					backgroundColor: "#ffffff",

					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						// type: "time",
						data: ["01-18", "01-19"],
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false
						},
						// minorSplitLine: {
						// 	show: true
						// },
					},
					yAxis: {
						type: 'value',
						scale: true,
						axisLabel: {
							formatter: '{value} %'
						},
					},
					grid: {
						top: 10,
						left: 0,
						right: 0,
						bottom: 20,
						containLabel: true,
					},
					series: [{
						data: [
							['01-18', 0],
							['01-19', 1]
						],
						type: "line",
						symbol: "none",
					}]
				};
				this.$refs.barChart.init(echarts, chart => {
					chart.setOption(this.barOption);
				});
			},
			// 当月日期改变
			dayChange(data) {
				console.log(data)
			},
			// 月份改变
			monthChange(data) {
				console.log(data)
				this.date = data.date
			},
			// 范围改变
			rangeChange(data) {
				console.log(data)
			},
			
			
			// 选择年月日
			bindDateChange: function(e) {
				let date = e.detail.value.replace(/-/g, '/')
				this.date = date
			},
			// 获取时间功能
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}/${month}/${day}`;
			},
			// 切换日历类型
			switchCalendar(type) {
				this.calendarType = type
			},
			switchCalendarIncome() {
				this.calendarincome = !this.calendarincome
			},
			openTrend() {
				this.$refs.trendPopup.open()
			},
			headTrend() {
				this.$refs.trendPopup.close()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F7;
	}

	.page-wrap {
		border-top: 1rpx solid #F4F5F7;
		padding-bottom: 160rpx;
	}

	.table-tab {
		margin-top: 10rpx;
		height: 88rpx;
		padding: 24rpx 48rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		background-color: #fff;
		border-bottom: 2rpx solid #F4F5F7;

		.table-tab-item {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.4);
			position: relative;

			&.active {
				color: #EE5953;
			}

			&.active::after {
				content: '';
				display: block;
				width: 48rpx;
				height: 8rpx;
				background: #EE5953;
				border-radius: 4rpx;
				position: absolute;
				bottom: -24rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.profit-loss {
		width: 702rpx;
		height: 212rpx;
		background: linear-gradient(180deg, #EE5953 0%, #FF3B30 100%);
		border-radius: 16rpx;
		margin: 24rpx auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding-top: 36rpx;
		box-sizing: border-box;

		.details-but {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			position: absolute;
			right: 26rpx;
			top: 40rpx;
		}

		.profit-loss-title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.profit-loss-num {
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
			margin-top: 16rpx;
		}

		.profit-loss-proportion {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 8rpx;
		}
	}

	.transaction-statistics {
		width: 702rpx;
		padding: 24rpx 32rpx;
		margin: 0 auto;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 16rpx;

		.transaction-statistics-title {
			display: flex;
			justify-content: space-between;

			.transaction-statistics-left,
			.transaction-statistics-right {
				display: flex;
				align-items: center;
			}

			.main-title {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #000000;
				line-height: 46rpx;
			}

			.item-title {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8E8E93;
				margin-left: 16rpx;
			}

			.detail-text {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8E8E93;
				margin-right: 10rpx;
			}
		}

		.gradient {
			width: 60rpx;
			height: 10rpx;
			background: linear-gradient(90deg, #FF3B30 0%, rgba(255, 59, 48, 0) 100%);
			margin-top: 16rpx;
		}

		.probability-data {
			display: flex;
			margin-top: 32rpx;

			.probability-data-item {
				width: 50%;

				.probability-num {
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					color: #EE5953;
				}

				.probability-name {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.8);
					margin-top: 8rpx;
				}

				.probability-proportion {
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					color: #EE5953;
					margin-top: 24rpx;
				}

				.probability-describe {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.8);
					margin-top: 8rpx;
				}
			}
		}

		.divider {
			width: 638rpx;
			height: 2rpx;
			background: rgba(0, 0, 0, 0.04);
			margin: 32rpx auto;
		}

		.trend {
			.trend-title {
				display: flex;
				align-items: center;

				.main-title {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #000000;
				}

				.item-title {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #8E8E93;
					margin-left: 16rpx;
				}
			}

			.trend-tab-box {
				display: flex;
				justify-content: space-between;
				width: 638rpx;
				height: 80rpx;
				background: #F7F7F7;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 4rpx;
				margin-top: 24rpx;

				.trend-tab-item {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.6);
					width: 226rpx;
					height: 72rpx;
					border-radius: 16rpx;
					line-height: 72rpx;
					text-align: center;

					&.active {
						background: #FFFFFF;
					}
				}
			}
		}

		.revenue-type {
			display: flex;
			justify-content: space-around;
			margin-top: 48rpx;

			.revenue-type-item {
				display: flex;
				align-items: center;

				.option-icon {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 2rpx solid #CCCCCC;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 24rpx;
					box-sizing: border-box;

					&.active {
						background-color: #EE5953;
						border: none;
					}
				}

				.option-text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.6);
				}
			}
		}

		.statistics-title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 24rpx;
			width: 638rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			.statistics-title-time {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.8);
			}

			.statistics-income {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.8);
			}
		}

		.qiun-charts {
			height: 328rpx;
			width: 638rpx;
			margin-top: 32rpx;
		}
	}

	.calendar-statistics {
		margin-top: 24rpx;

		.transaction-statistics-title {
			.transaction-statistics-right {
				display: flex;
				align-items: center;
			}

			.switch-icon {
				width: 36rpx;
				height: 24rpx;
				margin-right: 16rpx;
				font-size: 0;
			}
		}

		.calendar-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 32rpx;

			.calendar-title-left {
				display: flex;
				align-items: center;
				width: 112rpx;
				height: 60rpx;
				background: #F4F5F7;
				border-radius: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;

				.switch-type-item {
					width: 52rpx;
					height: 52rpx;
					background: #F4F5F7;
					border-radius: 50%;
					text-align: center;
					line-height: 52rpx;
					color: rgba(0, 0, 0, 0.4);

					&.active {
						background: #ffffff;
						color: #EE5953;
					}
				}
			}
			.calendar-title-right {
				.uni-input {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #356FE5;
				}
			}
		}
		.calendar-table {
			margin-top: 48rpx;
		}
		.accumulate-income {
			width: 638rpx;
			height: 80rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			line-height: 80rpx;
			text-align: center;
			margin: 10rpx auto;
		}
	}
	.note-prompt {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #8E8E93;
		line-height: 30rpx;
		margin-top: 24rpx;
		text-align: center;
	}
	
	.page-buts {
		display: flex;
		padding: 0 32rpx;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;
		.but {
			width: 328rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F4F5F7;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.8);
			line-height: 88rpx;
			text-align: center;
		}
	}
	.trendPopup-center {
		width: 654rpx;
		height: 688rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 32rpx;
		.trendPopup-title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			line-height: 44rpx;
			text-align: center;
		}
		.trendPopup-text {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: rgba(0,0,0,0.8);
			line-height: 44rpx;
			view {
				margin-top: 40rpx;
			}
		}
		.but {
			width: 590rpx;
			height: 88rpx;
			background: #EE5953;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 42rpx;
		}
	}
</style>